<template>
    <div class="message-area-container" >
        <DataForm @on-submit="handleSumbit"></DataForm>
        <h3>
            {{ title }}
            <span>{{ subTitle }}</span>
        </h3>
        <DataList :list="list"/>
        <div class="loading" v-load="isListLoading"></div>
    </div>
</template>
<script setup lang='ts'>
import { PropType } from 'vue';
import DataForm from './DataForm.vue';
import DataList from './DataList.vue';
import { TypeApiCommentI, TypeFormData } from '~@/api/apiTypes';
import { vLoad } from '~@/directives/loading/loadingDirective';
import { useAttrs } from 'vue';
    //#region defineXxx
    defineOptions({
        name:'MesaageAreaIndex'
    });

    const props=defineProps({
        title:{
            type:String,
            default:'主标题'
        },
        subTitle:{
            type:String,
            default:'副标题'
        },
        list:{
            type:Array as PropType<TypeApiCommentI[]>,
            default:[]
        },
        isListLoading:{
            type:Boolean,
            default:false
        }
    });

    const handleSumbit=(formData: TypeFormData, callback: Function)=>{
        emit('submit',formData,callback)
    }

    const emit = defineEmits<{
        submit:[formData: TypeFormData, callback: Function],
        event2:[para1:number,para2:string],
    }>();
    //#endregion
    
    console.log('useAttrs',useAttrs());
    
</script>
<style lang='less' scoped>
.loading{
    position: relative;
    height: 100px;
}
</style>